<template>
  <div class="home-container">
    <div class="nav-group">
      <div class="nav-header">
        <img class="app-logo" src="../../assets/logo.png" alt="logo" />
      </div>
      <div class="nav-content">
        <div class="nav-button">
          <button class="new-button" @click="tabActive(0)">
            <div class="button-wrapper">
              <svg-icon class="nav-icon" icon="bright-add"></svg-icon>
              <div class="build-button">新建</div>
            </div>
          </button>
          <button class="new-button" @click="tabActive(1)">
            <div class="button-wrapper">
              <svg-icon class="nav-icon" icon="bright-reject"></svg-icon>
              <div class="build-button">项目</div>
            </div>
          </button>
          <button class="new-button" @click="tabActive(3)">
            <div class="button-wrapper">
              <svg-icon class="nav-icon" icon="bright-sucai"></svg-icon>
              <div class="build-button">素材</div>
            </div>
          </button>
          <button class="new-button" @click="tabActive(2)">
            <div class="button-wrapper">
              <svg-icon
                class="nav-icon"
                icon="bright-administration"
              ></svg-icon>
              <div class="build-button">管理</div>
            </div>
          </button>
          <button class="new-button" @click="tabActive(4)">
            <div class="button-wrapper">
              <svg-icon class="nav-icon" icon="bright-data"></svg-icon>
              <div class="build-button">数据</div>
            </div>
          </button>

          <button class="new-button" @click="setTheme">
            <div class="button-wrapper">
              <div id="plus-icon" class="plus-icon">
                <svg
                  class="svg-icon icon"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2448"
                  width="15"
                  height="15"
                >
                  <path
                    d="M512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m0-85.333334V170.666667a341.333333 341.333333 0 1 1 0 682.666666z"
                    p-id="2449"
                    fill="#fff"
                  ></path>
                </svg>
              </div>
              <div class="build-button">主题</div>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="page-header">
        <homeHeader />
      </div>
      <add v-if="active == 0" />
      <pro v-if="active == 1" />
      <administration v-if="active == 2" />
      <material v-if="active == 3" />
      <database v-if="active == 4" />
    </div>
  </div>
</template>

<script>
import homeHeader from "./components/homeHeader.vue";
import add from "./components/add.vue";
import pro from "./components/project.vue";
import administration from "./components/administration.vue";
import material from "./components/material.vue";
import database from "./components/database.vue";
export default {
  components: {
    add,
    pro,
    administration,
    material,
    database,
    homeHeader,
  },
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    setTheme() {
      this.$store.dispatch("theme/setTheme");
      let themeType = this.$store.state.theme.type;
      if (themeType == "dark") {
        document.getElementById("themeLinkId").href = 'static/theme/dark.css'
        // this.changeClass(document.body, "custom-FEB84A");
      } else {
        document.getElementById("themeLinkId").href = 'static/theme/light.css'
        // this.changeClass(document.body, "custom-08E6B9");
      }
    },
    changeClass(element, className) {
      if (!element || !className) return;
      element.className = className;
    },
    tabActive(i) {
      this.active = i;
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  min-width: 726px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .nav-group {
    width: 48px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--background);
    box-shadow: rgb(0 0 0 / 5%) 9px 0px 28px 0px;
    border-right: 1px solid var(--border-color);

    .nav-header {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      color: var(--font-color);
      border-bottom: 1px solid var(--border-color);

      .app-logo {
        width: 40px;
        height: 40px;
      }
    }

    .nav-content {
      width: 100%;
      height: calc(100% - 48px);
      background: var(--nav-background);
    }
  }

  .main {
    flex: 1;
    height: 100%;
    .page-header {
      width: 100%;
      height: 48px;
    }
  }
}

.new-button {
  margin-bottom: 20px;
  padding: 0px;
  appearance: none;
  background: none;
  border: 0px;
  outline: 0px;

  .button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 66px;
    margin: 0px auto;
    border-radius: 4px;
    position: relative;

    .nav-icon {
      width: 50%;
      height: 50%;
    }

    .plus-icon {
      width: 30px;
      height: 30px;
      background: var(--theme-color);
      box-shadow: rgb(236 73 84 / 25%) 0px 4px 6px 0px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .build-button {
      margin-top: 4px;
      font-size: 12px;
      // color: var(--font-color);
      color: #fff;
    }
  }
}

.svg-icon {
  color: var(--font-color);
}
</style>
